<script setup lang="ts">
import {appWindow} from "@tauri-apps/api/window";
import {ref} from "vue";
import {platform} from "@tauri-apps/api/os";
import {confirm} from "@tauri-apps/api/dialog";
import {exit} from "@tauri-apps/api/process";
const isMacOS = ref(false)
const isFullScreen = ref(false)
const props = defineProps({
  exitOnClose:{
    type:Boolean,
    default:false
  },
  needConfirm:{
    type:Boolean,
    default:false
  }
})
platform().then(value => {
  isMacOS.value=value==='darwin'
})


const closeWindow = async ()=>{
  if(props.needConfirm) {
    const confirmed = await confirm('Are you sure?');
    if(confirmed){
      if (props.exitOnClose) {
        await exit(1)
      }
      await appWindow.close()
    }


  }else{
    if (props.exitOnClose) {
      await exit(1)
    }
    await appWindow.close()
  }
}
appWindow.onResized(()=>{

  appWindow.isFullscreen().then(value => {
    console.log(value)
    isFullScreen.value=value
  })
})
const setFullScreen = ()=>{
  appWindow.setFullscreen(true)
}

const maximizeWindow = ()=>{
  appWindow.isMaximized().then(value => {
    if(value){
      appWindow.unmaximize()
    }else{
      appWindow.maximize()
    }
  })


}

const minimizeWindow = ()=>{
  appWindow.minimize()
}
</script>

<template>
  <div class="window-operation" :class="{macos:isMacOS}">
    <template v-if="isMacOS" >
      <div style="height: 15px"></div>
<!--      <div class="light red" @click="closeWindow" v-show="!isFullScreen"></div>-->
<!--      <div class="light yellow" @click="minimizeWindow" v-show="!isFullScreen"></div>-->
<!--      <div class="light green" @click="setFullScreen" v-show="!isFullScreen"></div>-->
    </template>
    <template v-else>
      <div class="btn" @click="minimizeWindow">
        <v-icon color="#22222" icon="mdi-window-minimize"  size="16"></v-icon>
      </div>
      <div class="btn" @click="maximizeWindow">
        <v-icon color="#22222" icon="mdi-window-maximize"  size="16"></v-icon>
      </div>
      <div class="btn close" @click="closeWindow">
        <v-icon color="#22222" icon="mdi-window-close"  size="16"></v-icon>
      </div>
    </template>
  </div>
</template>

<style scoped lang="scss">
.macos{
  gap: 5px;
}
.window-operation{
  display: flex;
  align-items: center;
  .light {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 10px;
    text-align: center;
    color: #fff;
  }

  .light:hover {
    opacity: 0.8;
  }

  .light.yellow {
    background-color: #ffbf2b;
  }

  .light.red {
    background-color: #fd6458;
  }

  .light.green {
    background-color: #24cc3d;
  }


  .btn{
    color: #222;
    transition: background-color .3s;
    &:hover{
      background: #ddd;
    }
    &:is(.close):hover{
      background: #ff5454;
    }

    padding: 3px 10px;
    cursor: pointer;
    text-align: center;
  }
}
</style>